<template>
  <view class="">
    <uni-nav-bar title="车友团" color="#333" :border="false" statusBar></uni-nav-bar>
   <uni-section title="显示图标" subTitle="使用 show-icon 属性显示左侧小喇叭图标" type="line">
      <uni-notice-bar show-icon text="加入车友团，购买团惠包，享平台补贴" color="#774E17" background-color="#F7F2EB" />
    </uni-section>
   <!-- <image
      :src="Teammap2"
      mode=""
      style="width:96%;margin:0rpx 2%;height:110rpx"
      @click="navTo('groupBenefits/myGroup')"
    ></image> -->
    <!-- 车友团说明 -->
    <view class="explain">
      <view class="space-between left_explain">
        <text>我的团队</text>
        <text @click="navTo('team/explain')">规则</text>
      </view>
      <view class="right_explain">
        您可加入1个超级团和3个车友团，享受最优价格，您的消费为所有已加入团队贡献环保分。
      </view>
    </view>
    <!-- 区域价格 -->
    <view class="space-between textPrice">
      <view class="price">价格区域</view>
      <view class="region" @click.stop="priceArea()">
        <text>{{ positionText.name }}</text>
        <image src="../../static/team/down.png" mode="" v-if="positionList.length > 0"></image>
      </view>
      <view
        v-if="positionList.length > 0 && show"
        class="ul_item"
        :style="{ transform: show ? 'translateY(-60px)' : 'translateY(-20px)', zIndex: show ? '1' : '-1' }"
      >
        <view class="li_item" v-for="(item, index) in positionList" :key="index" @click="changeLoct(item)">
          {{ item.name }}
        </view>
      </view>
    </view>
    <!-- 超级团列表 -->
    <SuperTeam ref="supers"></SuperTeam>
    <!-- 添加团/普通团列表 -->
    <GroupList ref="Group"></GroupList>
    <!-- 获取当前经纬度 -->
    <Lotlats @position="position"></Lotlats>
    <!-- 底部功能按钮 -->
    <bottomFil :active="1"></bottomFil>
    <!-- 微信分享 -->
    <webWechat></webWechat>
    <!-- 账户充值到账 -->
    <ReceivedPop></ReceivedPop>
  </view>
</template>

<script setup lang="ts">
import bottomFil from '@c/pobulic/bottomFil.vue';
import ReceivedPop from '@c/pobulic/Received.vue';
import { Ref, ref, onMounted } from 'vue';
import { navTo } from '@/utils/navigator';
import { toPublish } from '@mqtt';
import { getDriverID } from '@/stores/driverID';
import { showLoading } from '@/utils/prompt';
import { GetCities, GetCitieList } from '@/gql/team';
import { Teammap2 } from '@/utils/Static';
import webWechat from '@c/pobulic/webWechat.vue';
import Lotlats from '@c/team/Lotlat.vue';
import GroupList from '@c/team/groupList.vue';
import { TestIem } from '@/gql/user';
import SuperTeam from '@c/team/surpeTeam.vue';
/**
 * 车友团主页
 * @param driver_id 用户iD
 * @param positionText 当前城市名称
 * @param positionList 加注机所在的城市列表
 * @param show 城市列表显示状态
 * @param Group 添加团组件值
 * @param supers 超级团组件值
 * @param userTest 用户身份判断（是否能查看商城主页信息）
 */
const driver_id = getDriverID();
const positionText: Ref<any> = ref({});
const positionList = ref([]);
const show = ref(false);
const Group = ref(null);
const supers = ref(null);

const userTest = ref('');
onMounted(() => {
  if (!uni.getStorageSync('storage_key').id || !driver_id) {
    uni.setStorageSync('storage', 'user');
    uni.reLaunch({
      url: '/pages/login/login',
    });
    return;
  }
  UserIdentity();
  CityList();
});
/**
 * 获取当前城市信息
 * @param {Object} lat 当前位置的纬度
 * @param {Object} lot 当前位置的经度
 * @return
 */
function position(lat: number, lot: number) {
  showLoading('正在加载');
  const payload = {
    query: GetCities,
    variables: {
      lon: lot,
      lat: lat,
    },
  };
  toPublish('ql/team/getCity', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    positionText.value = data.get_city;
    Group.value.CheYoutuans(positionText.value.code);
    supers.value.CheYoutuans(positionText.value.code);
    Group.value.Joins();
  });
}
/**
 * 获取用户身份
 */
function UserIdentity() {
  const payload = {
    query: TestIem,
    variables: {
      driver_id,
    },
  };
  toPublish('ql/driver/checkPage', payload, (obj: any) => {
    const { data } = obj;
    userTest.value = data.check_page.is_open;
    uni.setStorageSync('Useridentity', data.check_page.is_open);
  });
}
/**
 * 获取加注机分布的城市列表
 */
function CityList() {
  const payload = {
    query: GetCitieList,
  };
  toPublish('ql/team/getCityList', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    positionList.value = data.get_city_list;
  });
}
function priceArea() {
  show.value = !show.value;
}
/**
 * 切换城市列表并重新获取团信息
 * @param item.code 选中的城市code值
 * @return
 */
function changeLoct(item: any) {
  Group.value.CheYoutuans(item.code);
  supers.value.CheYoutuans(item.code);
  positionText.value = item;
  show.value = false;
}
</script>

<style scoped lang="less">
@import url('../index/less/teamIndex.less');
</style>
<style>
page {
  background-color: #fff;
}
body {
  background-color: #fff;
  height: 100vh;
  overflow: auto;
  font-family: 'PingFangSC-Regular', 'PingFang SC';
}
</style>
